SVG โ D3 Conversion & Manipulation Pipeline
History
No conversions yet
Clear History
Step 1: API Configuration
API Provider:
OpenAI
Google Gemini
API Key:
Find out possible models
Model:
Loading models...
Step 2: Input SVG & Convert
SVG Code:
-- Select Example --
Sankey Diagram(Observable)
Radical stacked bar chart(Observable)
Bubble map(Observable)
Choropleth map(Observable)
Ternary Plot (Plotly)
Bar Chart Race (Observable)
Pie Chart (Observable)
Histogram (Plotly)
Load
Convert to D3
SVG Preview:
Preview will appear here
Step 3: Test Manipulations
Select manipulation type:
-- Choose manipulation --
Filter by value range
Show only top 5
Sort descending by value
Group by category and sum values
Add moving average (rolling window)
Create ratio/normalized score field
Apply log transformation
Bin data into categories
Create small multiples/facets
Show random sample of data
Add drill-down on click
Toggle dark mode
Convert to scatter plot
Swap X and Y axes
Change color scheme
Increase font size
Change to logarithmic scale
Adjust margins and padding
Show/hide gridlines
Apply high-contrast palette
Use color-blind friendly palette
Add data labels to marks
Add trend/regression line
Add reference bands
Add text annotations
Add fisheye lens magnifier
Highlight specific zones
Add zoom/pan
Add tooltips
Add animation
Add brush selection
Add lasso selection
Enable multi-select (Shift/Ctrl)
Add cross-chart highlighting
Add range slider control
Add dropdown filter
Add date picker
Add play/pause animation controls
Add right-click context menu
Add undo/redo functionality
Add toggle switch controls
Add export PNG/CSV button
Add keyboard shortcuts
Play sound on hover/click
Sonify data values (pitch mapping)
Add speech output for values
Or enter custom manipulation prompt:
Apply Manipulation
Test Another
Step 4: Results
Preview
Generated Code
Download HTML